<!--
 * @Author: 王灿
 * @Date: 2019-11-26 20:43:08
 * @LastEditTime: 2020-03-17 10:59:28
 * @Description: 轮播图
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-carousel\index.vue
 -->
<template>
  <div class="public home-carousel">
    <!-- 列表 -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- table -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5">
      <el-table :data="tableData" style="width: 100%" class="public-table carousel-table">
        <!-- 排序 -->
        <el-table-column prop="sort" label="序号" width="140">
          <template slot-scope="scope" >
            <el-input v-model.number="scope.row.sort" />
            <el-button class="el-icon-edit" type="danger" @click="onClickSort(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="轮播图">
          <template slot-scope="scope">
            <img :src="imageUrl[scope.$index]" @click="onCheckInage(imageUrl[scope.$index])" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="onEdit(scope.row, imageUrl[scope.$index])"
            >编辑</el-button>
            <el-button type="text" size="small" @click="onDelete(scope.row.id)" class="active">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>

    <!-- 查看大图 -->
    <el-dialog
      title="轮播图"
      class="check-img__dialog"
      :visible.sync="show"
      :close-on-click-modal="false"
      width="500px"
    >
      <img :src="imageSrc" alt />
    </el-dialog>

    <!-- 新增/编辑 -->
    <el-dialog :title="tabTitle" :visible.sync="isShow" :close-on-click-modal="false" width="600px" top="8vh">
      <carousel-operate @onCancelBtn="onCancelBtn" :row="tabRow" :fileList="fileList" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import CarouselOperate from './carousel-operate/index.vue'
import { getRotationList, getRotationDelete, getRotationOrder } from '@/api/home.js'
import { getDownUrl } from '@/api/commodity.js'
export default {
  name: 'HomeCarousel',
  components: { JqTitle, CarouselOperate },
  data() {
    return {
      title: { label: '轮播图管理', flag: true, searchFlag: false },
      tableData: [],
      imageUrl: [],
      fileList: [],
      imageSrc: '',
      isShow: false,
      show: false,
      isRefresh: false,
      tabTitle: '',
      tabRow: {}
    }
  },
  created() {
    this.onGetRotationList()
  },
  watch: {
    // 监听刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetRotationList()
      }
    },
    // 监听页面关闭
    isShow() {
      if (!this.isShow) {
        this.fileList = []
      }
    }
  },
  methods: {
     // 活动排序
    onClickSort(row) {
      if (!(/^[1-9]\d*$/.test(row.sort))) {
        this.$message({
          type: 'error',
          message: '请输入正整数',
          duration: 1500
        })
        return false
      }
      getRotationOrder({
        id: row.id,
        sort: row.sort
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg,
          duration: 1500,
          onClose: () => {
            this.onGetRotationList()
          }
        })
      })
    },
    // 父子组件通讯
    onTableRow(data) {
      this.isShow = data.isShow
      this.isRefresh = false
      this.tabTitle = '新增'
      this.tabRow = {}
    },
    // 数据列表
    onGetRotationList() {
      this.tableData = []
      this.imageUrl = []
      getRotationList().then(res => {
        this.tableData = res.data
        let len = this.tableData.length
        if (len !== 0) {
          let i = 0
          this.onGetImageUrl(i, len)
        }
      })
    },
    // 获取对应轮播图
    onGetImageUrl(i, len) {
      // 下载图片
      getDownUrl({
        fileName: this.tableData[i].pic
      }).then(res => {
        this.imageUrl.push(res.data.url.split("?")[0])
        if (i < len - 1) {
          i++
          this.onGetImageUrl(i, len)
        }
      })
    },
    // 编辑
    onEdit(row, imageSrc) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.fileList.push({ name: row.pic, url: imageSrc })
      this.tabTitle = '编辑'
    },
    // 刷新传值
    onCancelBtn(data) {
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh
    },
    // 查看轮播图
    onCheckInage(imageSrc) {
      this.show = true
      this.imageSrc = imageSrc
    },
    // 删除
    onDelete(id) {
      this.$confirm('此操作将永久删除该轮播图，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getRotationDelete({
            'rotationIds': id
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetRotationList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.home-carousel {
  height: 100%;
  @include column;
  .public-table {
    height: 100%;
    &.carousel-table {
      tbody {
        td {
          padding: 10px 0 !important;
        }
      }
    }
    thead {
      line-height: 35px !important;
      th {
        padding: 0 !important;
        background-color: #f5f5f5 !important;
      }
    }
    tbody {
      td {
        height: 40px;
        line-height: 40px;
        // padding: 10px 0 !important;
        img {
          display: block;
          max-width: 100px;
          max-height: 100px;
          cursor: pointer;
        }
      }
    }
  }
  .el-table__row {
    .cell { 
      @include row;
      .el-button {
        padding: 7px 10px;
        border-radius: 0;
      }
    }
  }
}
</style>